<script lang="ts" setup>
import { computed } from 'vue';

// 接收 `searchValue` 作为参数
const props = withDefaults(
  defineProps<{
    content: string;
    highlightValue: string;
  }>(),
  {
    content: '',
    highlightValue: '',
  },
);

// 计算高亮后的内容
const highlightedContent = computed(() => {
  const searchValue = props.highlightValue.trim(); // 去除空格
  const slotContent = props.content; // 获取插槽内容

  if (!searchValue || !slotContent) {
    return slotContent; // 如果没有搜索内容，直接返回原始内容
  }

  // 创建高亮正则表达式
  const regex = new RegExp(`(${searchValue})`, 'gi');
  // 替换匹配的部分并高亮
  return String(slotContent).replace(
    regex,
    `<span class="text-red-400">$1</span>`,
  );
});
</script>

<template>
  <!-- 渲染高亮后的插槽内容 -->
  <span v-html="highlightedContent"></span>
</template>

<style scoped>
/* 高亮样式 */
.highlight {
  color: #ff4d4f; /* 高亮颜色 */
  font-weight: bold; /* 加粗 */
}
</style>
